<template>
  <ElContainer class="outer">
    <ElHeader></ElHeader>
    <ElContainer class="inner">
      <ElAside width="240px">
        <ElMenu router :default-active="$route.path">
          <template v-for="(e, i) in menuList" :key="i">
            <ElSubMenu :index="e.id">
              <template #title
                ><div>{{ e.title }}</div></template
              >
              <ElMenuItem v-for="(d, i) in e.children" :key="i" :index="d.path">{{
                d.title
              }}</ElMenuItem>
            </ElSubMenu>
          </template>
        </ElMenu>
        <!-- <div>{{ menuList }}</div> -->
      </ElAside>
      <ElMain>
        <!-- 渲染区域 -->
        <RouterView style="border: 1px solid red" />
      </ElMain>
    </ElContainer>
  </ElContainer>
  <!-- <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
    <div class="wrapper">
      <nav>
    
      </nav>
    </div>
  </header> -->
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from
import { geneForNav } from '@/data/userRoutes'
export default {
  name: 'AboutView',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      menuList: geneForNav(),
      menus: [
        {
          path: '/home',
          title: 'Home主页'
        },
        {
          path: '/about',
          title: '关于公司'
        },
        {
          path: '/pointRouter',
          title: 'point指针'
        }
      ]
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<style scoped>
.outer {
  border: solid 1px rebeccapurple;
  height: 100vh;
}
.inner {
  border: solid 1px blue;
}
.el-header {
  background-color: coral;
}
.el-aside {
  background-color: cadetblue;
}
.el-main {
  background-color: blanchedalmond;
}
</style>
